<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button type="primary" @click="run">开始分红</el-button>
      <span style="margin-left: 10px">点击按钮,可以处理之前没有分红的流水</span>
    </div>
    <el-card>
      <h3>减肥系统:</h3>
      <el-table
        :data="list1"
        :border="false"
        fit
        style="width: 100%;"
      >
        <el-table-column label="日期">
          <template slot-scope="{row}">
            <span>{{ row.create_time | timeFilter }}</span>
          </template>
        </el-table-column>
        <el-table-column label="用户ID">
          <template slot-scope="{row}">
            <span>{{ row.user_id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="电话">
          <template slot-scope="{row}">
            <span v-if="row.user">{{ row.user.mobile }}</span>
          </template>
        </el-table-column>
        <el-table-column label="昵称" width="120">
          <template slot-scope="{row}">
            <span v-if="row.user">{{ row.user.nickname }}</span>
          </template>
        </el-table-column>
        <el-table-column label="等级" width="100">
          <template slot-scope="{row}">
            <span v-if="row.user && row.user.level0">{{ row.user.level0.display }}</span>
          </template>
        </el-table-column>
        <el-table-column label="直推人数" align="center">
          <template slot-scope="{row}">
            <span>{{ row.recommend_num }}</span>
          </template>
        </el-table-column>
        <el-table-column label="总业绩">
          <template slot-scope="{row}">
            <span>{{ +row.total }}</span>
          </template>
        </el-table-column>
        <el-table-column label="分红比例">
          <template slot-scope="{row}">
            <span>{{ +row.ratio }}%</span>
          </template>
        </el-table-column>
        <el-table-column label="总分红">
          <template slot-scope="{row}">
            <span v-if="+row.amount > 0" style="color: red">{{ +row.amount }}</span>
            <span v-else>{{ +row.amount }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <p></p>
    <el-card>
      <h3>面部系统:</h3>
      <el-table
        :data="list2"
        :border="false"
        fit
        style="width: 100%;"
      >
        <el-table-column label="日期">
          <template slot-scope="{row}">
            <span>{{ row.create_time | timeFilter }}</span>
          </template>
        </el-table-column>
        <el-table-column label="用户ID">
          <template slot-scope="{row}">
            <span>{{ row.user_id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="电话">
          <template slot-scope="{row}">
            <span v-if="row.user">{{ row.user.mobile }}</span>
          </template>
        </el-table-column>
        <el-table-column label="昵称" width="120">
          <template slot-scope="{row}">
            <span v-if="row.user">{{ row.user.nickname }}</span>
          </template>
        </el-table-column>
        <el-table-column label="等级" width="100">
          <template slot-scope="{row}">
            <span v-if="row.user && row.user.level2">{{ row.user.level2.display }}</span>
          </template>
        </el-table-column>
        <el-table-column label="总业绩">
          <template slot-scope="{row}">
            <span>{{ +row.total }}</span>
          </template>
        </el-table-column>
        <el-table-column label="分红比例">
          <template slot-scope="{row}">
            <span>{{ +row.ratio }}%</span>
          </template>
        </el-table-column>
        <el-table-column label="子团队分红">
          <template slot-scope="{row}">
            <span>{{ +row.children_total }}</span>
          </template>
        </el-table-column>
        <el-table-column label="总分红">
          <template slot-scope="{row}">
            <span v-if="+row.amount > 0" style="color: red">{{ +row.amount }}</span>
            <span v-else>{{ +row.amount }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>

import api from '@/api'
import { parseTime } from '@/utils'

export default {
  filters: {
    timeFilter(time) {
      // return time ? parseTime(time, '{y}-{m}-{d} {h}:{i}:{s}') : ''
      return time ? parseTime(time, '{y}-{m}-{d} {h}:{i}') : ''
    }
  },
  data() {
    return {
      list1: [],
      list2: []
    }
  },
  created() {
  },
  mounted() {
    this.getTotal()
  },
  methods: {
    getTotal() {
      api.finance.getYear().then(response => {
        const { data } = response
        const list = data.list
        this.list1 = list.filter(x => +x.type === 1)
        this.list2 = list.filter(x => +x.type === 2)
      })
    },
    run() {
      api.finance.runYear().then(() => {
        this.$message({
          message: '操作成功',
          type: 'success'
        })
        this.getTotal()
      })
    }
  }
}
</script>
